<template>
  <!-- template中放的是HTML代码，Vue的作用区域，相当于 el -->
  <div class="home">
    <button @click="show = !show">显示/隐藏</button>
    <h2 v-show="show">要显示/隐藏的内容</h2>



    <!-- Vue中使用 v-bind: (缩写成:) 加在属性前面，给属性值做动态绑定   -->
    <p v-bind:title="num">{{ num }}</p>
    <p :title="num">{{ str }}</p>
    <button :disabled="true">按钮</button>

    <p>{{ isShow }}</p>
    <p>{{ obj }}</p>
    <p>{{ arr }}</p>

    <!-- 插值绑定也可以计算 -->
    <p>{{ obj.c[1].d }}</p>
    <p>{{ num * 100 }}</p>
    <p>{{ str + "asd" }}</p>
    <p>{{ !isShow }}</p>
    <!-- !!!!!!!!!!!!! -->
    <!-- <p>{{ arr.reverse() }}</p> -->

    <p :style="'font-size: ' + num + 'px; display: ' + (isShow ? 'block' : 'none')">
      大字体
    </p>
    <div v-html="htmlStr"></div>

    <!-- (参数1, 参数2) in 数组     参数2可选; key是唯一标识符，提升渲染性能 -->
    <ul>
      <li v-for="(item, index) in list" :key="item">{{ index }}{{ item }}</li>
    </ul>

    <p v-if="isShow">显示</p>
    <p v-else>隐藏</p>
    <!-- <p v-else-if="">隐藏</p> -->

    <!-- template用来分组的不会渲染出来的标签，相当于小程序的block -->
    <template v-if="isShow">
      <p>第1个标签</p>
      <p>第2个标签</p>
      <p>第3个标签</p>
    </template>



    <img alt="Vue logo" src="../assets/logo.png" />

  </div>
</template>

<script>
/* ES6 的模块导出，new Vue传的对象参数
  new Vue(对象)
*/
export default {
  // data数据，必须是个函数
  data() {
    return {
      show: true,
      num: 50,
      isShow: true,
      str: "abc",
      obj: {
        a: 1,
        b: "abc",
        c: [
          1,
          {
            d: 3,
          },
        ],
      },
      arr: [1, "a", { c: 2 }],
      htmlStr: "<h3>hi <strong>world</strong></h3>",
      list: ["Tom", "Jack", "Lisa"],
      // list: [{id: 0, name: 'Tom'}, {id: 1, name: 'Jack'}],

    };
  },
};
</script>

<style lang="sass">
.home h1
  color: red
</style>
